<!-- 
 * 省市区选择器
 * @作者：陈万照
 * @公司：山东标梵互动信息技术有限公司
 * @官网：http://biaofun.com/
 * @微信：C207668802
 * @QQ：207668802
 * @邮箱：cwz@biaofun.com || 207668802@qq.com
 * @版本：v1.0.8
 -->
<template>
	<view class="region">
		<picker mode="multiSelector" class="item-input-picker" :range="range" range-key="label" @change="change" @columnchange="columnchange" :value="value" :disabled="disabled">
			<view class="content item-input-picker-show" :class="{ placeholder: !regionStr }">
				<text class="ellipsis-1">{{ regionStr ? regionStr : placeholder }}</text>
			</view>
		</picker>
	</view>
</template>

<script>
// const this.regionData = require('@/static/biaofun-region/region.json');
import { mapGetters, mapActions } from 'vuex'

export default {
	/**
	 * 数据
	 */
	props: {
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false
		},

		// placeholder
		placeholder: {
			type: String,
			default: ''
		},

		// 默认值
		defaultValue: {
			type: Array,
			default() {
				return null;
			}
		},
		
		// 显示操作类型
		optType: {
			type: String,
			default: 'label'
		},
		// 数据
		// regionData: {
		// 	type: Array,
		// 	default() {
		// 		return []
		// 	}
		// }
	},

	/**
	 * 数据
	 */
	data() {
		return {
			regionData: [],
			range: [[], [], []], // 省/市/区
			value: [0, 0, 0], // value 的值表示选择了 range 中的第几个（下标从 0 开始）,默认为 [0, 0, 0]，即 range 为 ['第一个省', '第一个省的第一个市', '第一个省的第一个市的第一个区']
			regionStr: '' // 选中的省市区字符串
		};
	},
	computed: {
		...mapGetters([
			'regionArr'
		])
	},

	/**
	 * 监听数据
	 */

	watch: {
		// 默认值
		// defaultValue() {
		// 	// 设置/更新省市区数据
		// 	this.defaultValue ? this.setDefaultValue() : this.setRange();
		// }
	},
	/**
	 * 组件初次加载完成
	 */
	mounted() {
		if(this.regionArr.length > 0) {
			this.regionData = this.$u.deepClone(this.regionArr)
			this.initSetData()
		}else {
			this.getRegion()
		}
		
	},

	/**
	 * 函数
	 */
	methods: {
		...mapActions([
			'saveRegionData'
		]),
		initSetData() {
			// 设置/更新省市区数据
			this.defaultValue.length > 0 ? this.setDefaultValue() : this.setRange();
			// 默认值
			this.setRange()
		},
	 	async getRegion() {
			let res = await this.$api.getRegion()
			if(res) {
				let { data } = res
				this.saveRegionData(data)
				this.regionData = data
				this.initSetData()
			}
		},
		/**
		 * 设置/更新省市区数据
		 */
		setRange() {
			// 省市区数据
			let range = [[], [], []];

			// 省
			this.regionData.forEach(el => {
				range[0].push({
					value: el.value,
					label: el.label,
				});
			});
			
			if(this.regionData[this.value[0]].children.length > 0) {
				// 市
				this.regionData[this.value[0]].children.forEach(el => {
					range[1].push({
						value: el.value,
						label: el.label,
					});
				});
				
				// 区
				if(this.regionData[this.value[0]].children[this.value[1]].children.length > 0) {
					this.regionData[this.value[0]].children[this.value[1]].children.forEach(el => {
						range[2].push({
							value: el.value,
							label: el.label,
						});
					});
				}
			}

			// 更新省市区数据
			this.range = range;
		},

		/**
		 * 设置默认值
		 */
		setDefaultValue() {
			let provinceIndex = 0, cityIndex = 0, areaIndex = 0
			// 查找省
			provinceIndex = this.regionData.findIndex(el => {
				if(this.optType == 'code') {
					return el.value == this.defaultValue[0];
				}else {
					return el.label == this.defaultValue[0];
				}
			});
			if(provinceIndex < 0) provinceIndex = 0;
			
			if(this.regionData[provinceIndex].children.length > 0) {
				// 查找市
				cityIndex = this.regionData[provinceIndex].children.findIndex(el => {
					if(this.optType == 'code') {
						return el.value == this.defaultValue[1];
					}else {
						return el.label == this.defaultValue[1];
					}
				});
				if(cityIndex < 0) cityIndex = 0;
				
				if(this.regionData[provinceIndex].children[cityIndex].children.length > 0) {
					// 查找区
					areaIndex = this.regionData[provinceIndex].children[cityIndex].children.findIndex(el => {
						if(this.optType == 'code') {
							return el.value == this.defaultValue[2];
						}else {
							return el.label == this.defaultValue[2];
						}
					});
					if(areaIndex < 0) areaIndex = 0;
				}
			}

			// 更新 value 的值
			this.value = [provinceIndex, cityIndex, areaIndex];

			// 设置/更新省市区数据
			this.setRange();

			// 更新选中的省市区字符串
			this.regionStr =
				this.regionData[provinceIndex].label + ' ' + this.regionData[provinceIndex].children[cityIndex].label + ' ' + this.regionData[provinceIndex].children[cityIndex].children[areaIndex].label;
		},

		/**
		 * 某一列的值改变时触发
		 * @param {Number} event.detail.column 表示改变了第几列（下标从0开始）
		 * @param {Number} event.detail.value 表示变更值的下标
		 */
		columnchange(event) {
			// 改变的是省
			if (event.detail.column == 0) {
				this.value = [event.detail.value, 0, 0];
			}
			// 改变的是市
			if (event.detail.column == 1) {
				this.value.splice(1, 1, event.detail.value);
				this.value.splice(2, 1, 0);
			}
			// 改变的是区
			if (event.detail.column == 2) {
				this.value.splice(2, 1, event.detail.value);
			}

			// 设置/更新省市区数据
			this.setRange();
		},

		/**
		 * 确认选择
		 */
		change(event) {
			// 更新选中的省市区字符串
			this.regionStr = this.range[0][this.value[0]].label + ' ' + (this.range[1].length > 0? this.range[1][this.value[1]].label: '') + ' ' + (this.range[2].length > 0? this.range[2][this.value[2]].label: '') ;

			// 传递事件
			this.$emit('change', [this.range[0][this.value[0]], (this.range[1].length > 0? this.range[1][this.value[1]]: {}), (this.range[2].length > 0? this.range[2][this.value[2]]: {})]);
		}
	}
};
</script>

<style lang="scss" scoped>
.ellipsis-1 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.content {
	text-align: right;
}
.item-input-picker {
	height: auto;
	width: 100%;
	display: block;
	.item-input-picker-show {
		min-height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		line-height: 40rpx;
		font-size: 30rpx;
		color: $theme-font;
		&::after {
			content: '';
			display: block;
			width: 14rpx;
			height: 14rpx;
			border: 1px solid $theme-font;
			border-left-color: transparent;
			border-top-color: transparent;
			transform: rotate(-45deg);
			margin-left: 14rpx;
			position: relative;
			right: 4rpx;
		}
	}
}
.placeholder {
	color: #949596;
}
</style>
